<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="模型名称" prop="modelName">
        <el-input
          v-model="queryParams.modelName"
          placeholder="请输入模型名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['etl-model:model:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['etl-model:model:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['etl-model:model:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['etl-model:model:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column v-for="col in cols" :prop="col.prop" :label="col.label">
          <template slot-scope="scope">
              <el-input placeholder="请输入内容" v-show="canDataEdit" v-model="scope.row[scope.column.property]" class="edit-table-input"></el-input>
              <span v-show="!canDataEdit">{{scope.row.id}}</span>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-grid"
            @click="handleTableDataEdit(scope.row)"
          >编辑数据</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList2"
    />

    
    <!-- 添加模型数据对话框 -->
    <el-dialog :title="addModelDataTitle" :visible.sync="openAddMode" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item v-for="(col) in cols" :label="col.label" :prop="col.prop">
            <el-input v-model="form[col.prop]" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
        <el-button @click="cancelAddForm">取 消</el-button>
      </div>
    </el-dialog>

    
    <!-- 编辑模型数据对话框 -->
    <el-dialog :title="editModelDataTitle" :visible.sync="openEditMode" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="edit_form" :model="edit_form" :rules="rules" label-width="80px">
        <el-form-item v-for="(col) in cols" :label="col.label" :prop="col.prop">
            <el-input v-model="edit_form[col.prop]" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
        <el-button @click="cancelEditForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listModel, getModel, addModel, updateModel, getModelData, addModelData, delModelData, updateModelData } from "@/api/etl-model/model";
import { listFields, getFields } from "@/api/etl-model/fields";
import fieldsPage from "../fields/index";

export default {
  name: "Model",
  components: {
      fieldsPage,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      //是否数据可编辑
      canDataEdit: true,
      showSearch: false,
      single:false,
      multiple:false,
      total:0,
      cols: [{
                  prop: 'date',
                  label: '日期'
                },
                {
                  prop: 'name',
                  label: '姓名'
                },
                {
                  prop: 'address',
                  label: '地址'
                },
      ],
      tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        modelName: null,
        modelId:null,
        id:null,
        tag: null,
        description: null,
        createPerson: null,
        updatePerson: null
      },
      //查询列信息参数
      queryFieldsParams: {
        pageNum: 1,
        pageSize: 100,
        modelId: null,
        fieldName: null,
        fieldDescription: null,
        sequence: null,
        dataType: null,
        dataLength: null
      },
      //数据模型属性列表
      fieldsList: [],
      // 新增表单参数
      form: {},
      addModelDataTitle:"新增模型数据",
      //新增模型数据对话框
      openAddMode:false,
      // 编辑表单参数
      edit_form: {},
      // 编辑表单旧数据
      old_form:{},
      editModelDataTitle:"编辑模型数据",
      //新增模型数据对话框
      openEditMode:false,
      //父数据模型信息
      parentDataModel:null,
      // 表单校验
      rules: {
      }
    };
  },
  created() {
  },
  methods: {
    getModelFields(dataModel) {
      this.parentDataModel = dataModel;
      this.queryFieldsParams.modelId = this.parentDataModel.id;
      var self = this;
      listFields(this.queryFieldsParams).then(response => {
        self.fieldsList = response.rows;
        self.initDisplayForm();
      });
    },
    initDisplayForm(){
      this.cols = [];
      for(var i = 0; i < this.fieldsList.length; i++) {
        var item = {};
        item.prop = this.fieldsList[i].fieldName;
        item.label = this.fieldsList[i].fieldDescription;
      	this.cols.push(item);
      }
      getModelData(this.queryParams).then(response => {
        debugger;
        this.loading = false;
        this.tableData = response.rows;
        console.log(response);
      });
      this.loading = false;
    },
    /** 查询数据模型管理列表 */
    getList(model) {
      debugger;
      this.loading = true;
      this.queryParams.modelName = model.modelName;
      this.queryParams.id = model.id;
      this.getModelFields(model);
      // getModelData(this.queryParams).then(response => {
      //   this.modelList = response.rows;
      //   this.total = response.total;
      //   this.loading = false;
      // }).catch((err) =>{
      //   console.log(err);
      //   this.loading = false;
      // })
    },
    getList2() {

    },
    // 取消新增按钮
    cancelAddForm() {
      this.openAddMode = false;
      this.reset();
    },
    // 取消编辑按钮
    cancelEditForm() {
      this.openEditMode = false;
      this.resetEditForm();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null
      };
      this.resetForm("form");
    },
    // 编辑表单重置
    resetEditForm() {
      this.edit_form = {
        id: null
      };
      this.resetForm("edit_form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.openAddMode = true;
      this.addModelDataTitle = "添加数据模型管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.activeMainTabName = "baseInfoTab";
      const id = row.id || this.ids
      getModelData(id).then(response => {
        this.edit_form = response.data;
        this.old_form = response.data;
        this.openEditMode = true;
        this.editModelDataTitle = "修改数据模型管理";
      });
    },
    /** 提交按钮 */
    submitAddForm() {
        debugger;
            addModelData(this.form,this.parentDataModel,this.fieldsList).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
    },
    /** 提交按钮 */
    submitEditForm() {
            updateModelData(this.edit_form,this.old_form,this.parentDataModel,this.fieldsList).then(response => {
              this.msgSuccess("编辑成功");
              this.open = false;
              this.getList();
            });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      var self = this;
      this.$confirm('确认删除这条数据吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delModelData(row,self.parentDataModel,self.fieldsList);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('etl-model/model/export', {
        ...this.queryParams
      }, `数据模型列表.xlsx`)
    },
    /** 生成物理模型*/
    handleCreateTable(row) {
      //
    },
    /** 确认数据修改 */
    submitDataEditForm(){
       this.openEditMode = false;
    },
    /** 取消数据修改 */
    cancelDataEdit(){
       this.openEditMode = false;
    },
    /** 编辑数据 */
    handleTableDataEdit(row){
      this.old_form = {};
      this.edit_form = {};
      for (var name in row){
        this.$set(this.old_form, name, row[name]);
        this.$set(this.edit_form, name, row[name]);
      }
       this.openEditMode = true;
    }
  }
};
</script>
